const gulp = require("gulp")
const scss = require("gulp-sass")
const less = require("gulp-less")
const minifyCss = require("gulp-minify-css")
const connect = require("gulp-connect")
const autoprefixer = require("gulp-autoprefixer")
const browserify = require("browserify")
const uglify = require("gulp-uglify")
const babelify = require("babelify")
const imagemin = require("gulp-imagemin")
const pngquant = require("imagemin-pngquant")
// const smushit = require("gulp-smushit")
const source = require("vinyl-source-stream")
const babel = require("gulp-babel")
const clean = require("gulp-clean")

// catch the error message
function notify(err) {
  this.emit("end")
}

gulp.task("html", () => {
  return gulp.src("src/*.html").pipe(gulp.dest("dist")).pipe(connect.reload())
})

gulp.task("scss", () => {
  return gulp
    .src("src/style/**/*.scss")
    .pipe(scss().on("error", notify))
    .pipe(
      autoprefixer({
        overrideBrowserslist: ["> 1%", "last 2 versions"],
        cascade: true,
        remove: true,
      })
    )
    .pipe(minifyCss())
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload())
})

gulp.task("less", () => {
  return gulp
    .src("src/style/**/*.less")
    .pipe(less().on("error", notify))
    .pipe(
      autoprefixer({
        overrideBrowserslist: ["> 1%", "last 2 versions"],
        cascade: true,
        remove: true,
      })
    )
    .pipe(minifyCss())
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload())
})

gulp.task("images", () => {
  return gulp
    .src("src/images/**/*")
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload())
})

gulp.task("images_compress", () => {
  return gulp
    .src("src/images/**/*")
    .pipe(
      imagemin({
        progressive: true,
        use: [pngquant()],
      })
    )
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload())
})

// gulp.task("images", () => {
//   return gulp
//     .src("src/images/**/*.{png,jpg,jpeg}")
//     .pipe(
//       smushit({
//         verbose: true,
//       })
//     )
//     .pipe(gulp.dest("dist/images"))
//     .pipe(connect.reload())
// })

gulp.task("js", () => {
  return gulp
    .src("src/js/**/*.js")
    .pipe(
      babel({
        presets: ["@babel/env"],
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest("dist/images"))
    .pipe(connect.reload())
})

// gulp.task("react", (done) => {
//   browserify("src/components/main.js")
//     .transform(babelify, {
//       presets: ["es2015", "react"],
//     })
//     .bundle()
//     .on("error", notify)
//     .pipe(source("bundle.js"))
//     .pipe(gulp.dest("dist/images"))
//     .pipe(connect.reload())
//   done()
// })

gulp.task("clean", () => {
  return gulp.src("dist", { allowEmpty: true }).pipe(clean())
})

gulp.task("watch", () => {
  gulp.watch("src/**/*.html", gulp.series("html"))
  gulp.watch("src/js/**/*.js", gulp.series("js"))
  gulp.watch("src/style/*.scss", gulp.series("scss"))
  gulp.watch("src/style/*.less", gulp.series("less"))
  // gulp.watch("src/components/**/*.{jsx,js}", gulp.series("react"))
  gulp.watch("src/images/**/*", gulp.series("images"))
})

gulp.task("server", () => {
  connect.server({
    root: "dist",
    host: "0.0.0.0",
    port: 8888,
    livereload: true,
    open: true
  })
})

gulp.task("dev", gulp.series(gulp.parallel("server", "watch")))

gulp.task(
  "build",
  gulp.series(
    "clean",
    gulp.parallel("html", "js", "scss", "less", "images_compress")
  )
)
